<script setup lang="ts">
import {ref} from 'vue'
import componentData from '@/components/server/componentData.ts'
// 使用 Clipboard API（现代浏览器）
function copyText(text: string): Promise<void> {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    return navigator.clipboard.writeText(text)
  } else {
    // 兼容旧浏览器，使用临时 textarea
    return new Promise((resolve, reject) => {
      const textarea = document.createElement("textarea")
      textarea.value = text
      textarea.style.position = "fixed" // 防止滚动
      textarea.style.top = "-9999px"
      document.body.appendChild(textarea)
      textarea.focus()
      textarea.select()
      try {
        const successful = document.execCommand("copy")
        document.body.removeChild(textarea)
        if (successful) resolve()
        else reject(new Error("Copy failed"))
      } catch (err) {
        document.body.removeChild(textarea)
        reject(err)
      }
    })
  }
}


</script>

<template>
<div class="component-list">
  <div v-for="item in componentData" class="screen hover-screen" @click="copyText(item.importComponent)">
    <div class="screen-all-border">
      <div class="screen-top-border"></div>
    </div>
    <div class="transition opacity-0 screen-border"></div>
    <div class="glass-effect"></div>
    <div class="flex-col content">
      <div class="img flex1">
        <div class="img-item" :style="`background-image: url(${item.coverPath})`"></div>
      </div>
      <div class="text">{{item.component}}</div>
    </div>
  </div>
</div>
</template>

<style scoped>
.content{
  height: 100%;
  width: 100%;
}
.flex-col{
  display: flex;
  flex-direction: column;
}
.flex1{
  flex: 1;
}
.component-list{
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(23.61% 31.43% at -5.9% 89.28%, rgba(58, 137, 254, 0.075) 0%, rgba(4, 8, 15, 0) 100%), radial-gradient(13.26% 17.66% at 101.67% 91.33%, rgba(58, 137, 254, 0.255) 0%, rgba(4, 8, 15, 0) 100%), radial-gradient(36.01% 47.93% at 101.11% 84.06%, rgba(58, 137, 254, 0.255) 0%, rgba(4, 8, 15, 0) 100%), linear-gradient(359.25deg, rgba(60, 66, 82, 0.55) 0.63%, rgb(4, 8, 15) 23.66%), linear-gradient(0deg, rgb(4, 8, 15), rgb(4, 8, 15)), rgb(17, 17, 21);
  left: 0;
  top: 0;
  overflow-y: auto;

  gap: 24px;
  display: grid;
  padding: 24px;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.screen{
  background: radial-gradient(66.07% 38.1% at 49.81% 100%, rgba(57, 148, 255, .114) 0%, rgba(255, 255, 255, 0) 79.53%), radial-gradient(48.47% 51.06% at 86.69% -5.29%, rgba(200, 232, 255, .057) 0%, rgba(194, 230, 255, 0) 79.53%), radial-gradient(102.47% 289.76% at -2.47% 39.42%, rgba(202, 233, 255, .0183) 0%, rgba(255, 255, 255, 0) 100%, rgba(219, 240, 255, 0) 100%), radial-gradient(93.49% 64.02% at 42.21% -7.41%, rgba(228, 244, 255, .102) 0%, rgba(160, 215, 255, 0) 79.53%);
  box-shadow: 0 -8px 12px #00000029, inset 0 1px #ffffff0f;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 18px;
  height: 240px;
  transition: all .2s linear;
}
.screen-all-border{
  position: absolute;
  background: transparent;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid rgba(255, 255, 255, .07059);
  border-bottom-color: #768eb035;
  border-right-color: #768eb035;
  border-radius: 18px;
  overflow: hidden;
}
.screen-border{
  position: absolute;
  background: transparent;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid #3a89fe;
  box-shadow: 0 0 30px #3a89fe50;
  border-radius: 18px;
  overflow: hidden;
  z-index: 1;

  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}
.screen-top-border{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(220, 246, 255, .13), rgba(209, 228, 255, 0), rgba(237, 243, 255, 0));
  animation: marquee-horizontal 2.5s linear infinite;
}

@keyframes marquee-horizontal {
  0% {
    transform: translate(100%)
  }

  to {
    transform: translate(-100%)
  }
}


.img{
  padding: 16px 16px 0;
  .img-item{
    border-radius: 8px;
    width: 100%;
    height: 100%;
  }
}
.text{
  padding: 12px;
}
.hover-screen:hover {
  transform: translateY(-6px);
}
.hover-screen:hover .screen-border, .hover-screen:hover .content-mask {
  opacity: 1;
}
.opacity-0{
  opacity: 0;
}

.glass-effect{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  &:before{
    content: '';
    position: absolute;
    display: block;
    width: 140px;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    transform: skewX(-38deg) translateX(70px);
  }
  &:after{
    content: '';
    position: absolute;
    display: block;
    width: 40px;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    transform: skewX(-38deg) translateX(300px);
  }
}
</style>
